<template>
  <div class="home">
    <div>
      <el-table
        :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="handleCurrentChange"
      >
        <el-table-column
          prop="agency"
          label="经销商"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="peihuo"
          label="待配货"
          sortable
          width="180">
        </el-table-column>


        <el-table-column
          label="操作">
          <template slot-scope="scope">
<!--            <el-popconfirm-->
<!--              title="确定删除该条出库记录吗？对应库存会回滚"-->
<!--              @onConfirm="del(scope.row.id)"-->
<!--            >-->
<!--              <el-button slot="reference" size="mini" >删除</el-button>-->
<!--            </el-popconfirm>-->
            <el-button @click="drawer = true;peihuo(scope.row.agency)" slot="reference" size="mini" >配货</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!--    <div style="text-align: center;margin-top: 30px;">-->
<!--      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"-->
<!--                     :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"-->
<!--                     :total="this.list.length">-->
<!--      </el-pagination>-->
<!--    </div>-->
    <el-dialog
      title="配货"
      :visible.sync="drawer"
      :with-header="false"
      size="80%">
      <el-table
        :data="peihuo_form"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        @selection-change="handleCurrentChange"
      >
        <el-table-column
          prop="invoice_no"
          label="发票号"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="product_name"
          label="产品名"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="daipeihuo"
          label="待配货数量"
          sortable
          width="120">
        </el-table-column>
        <el-table-column
          label="选择产品"
          width="300">
          <template slot-scope="scope">
<!--            {{scope.row.con_id}}-->
            <el-select v-model="scope.row.con_id"  style="width: 280px" @click.native="selectTrigger(scope.row.product_name)" filterable placeholder="请选择">
              <el-option
                v-for="item in form.products"
                :key="item.id"
                :label="item.product_name"
                :value="item.id"
              >
                <a style="font-size: x-small;color: #97a8be">{{item.inbound_no}}</a><a style="margin-left:1%;">{{item.product_name}}</a><a style="margin-left:2%;font-size: x-small;color: #97a8be">&nbsp;{{item.qty}}</a><a style="margin-left:2%;font-size: x-small;color: #97a8be">&nbsp;{{item.bf}}</a>
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="配货数">
          <template slot-scope="scope">
            <el-input v-model=scope.row.amount></el-input>
          </template>
        </el-table-column>



      </el-table>
      <el-button type="success"  round  style="margin-left: 16px;"  @click="onSubmit">提交</el-button>


    </el-dialog>

  </div>

</template>

<script>
import {check_outbound_details, outbound_record, suboutbound} from '../../api/outbound'
  import { del_outbound } from '../../api/outbound'
  import { agency_peihuo } from '../../api/outbound'
 import { check_peihuo_product } from '../../api/outbound'
  import { submit_peihuo_product } from '../../api/outbound'
import {zhuangbei_detail} from "../../../../../wufang/frontend/src/api/cal";

  export default {
    name: 'outbound_record',
    data(){
      return{
        drawer:false,
        peihuo_form:[],

        user:true,
        list:[],
        pagesize:10,
        currentPage:1,
        form: {
          products:[
          ],
        }
      }
    },
    mounted() {
      this.check_outbound_record()
    },
    methods:{
      onSubmit() {
        // console.log(this.form)
        submit_peihuo_product(this.peihuo_form)
          .then(location. reload())
      },

      selectTrigger(value){
        var product = {product: value}
        Promise.all([
          new Promise((resolve, reject) => {
            check_peihuo_product(product).then(response => {resolve(response)
                // console.log(response)
              }
            )
          }),]
        ).then(result=> {
            // console.log(result[0].options)
            this.form.products = []
            for (let index = 0; index < result[0].options.length; index++) {
              this.form.products.push({ id : "" , inbound_no : "" ,product_name : "",qty : "",amount:'',bf:''});
              this.form.products[index].id= result[0].options[index][0];
              this.form.products[index].inbound_no= result[0].options[index][1];
              this.form.products[index].product_name= result[0].options[index][2];
              this.form.products[index].bf= result[0].options[index][3];
              this.form.products[index].qty= result[0].options[index][4];
            }
            console.log(this.form.products)})

          .catch(err => {
          console.log(err)
        })
      },
      check_outbound_record(){
        this.list = []
        outbound_record().then(res =>{
            // console.log(res["list"])
            this.list = res["list"]
          },
        )
      },
      peihuo(data){
        const req = {data:data}
        agency_peihuo(req)
          .then(res =>{
              // console.log(res["list"])
              this.peihuo_form = res["data"]
            },
          )
      },
      handleSizeChange: function (size) {
        this.pagesize = size;
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
      },
      del(data){
        del_outbound(data).then(res =>{
            // console.log(res["list"])
            this.list = res["list"]
          },
        )
      },

    }

  }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
